<template>
    <div>
        <p class="edit-title" v-show="title">【{{ title }}】</p>
        <div v-for="(itme, index) in data" :key="index">
            <div v-show="itme.riskModifyTypeEnum == '1'">
                <span class="edit-type">新增：</span> <span class="edit-color">{{ itme.moduleDetail }}</span>
                <span class="edit-color" style="white-space: pre-wrap">
                    {{ isNaN(itme.afterChange) ? itme.afterChange : numberFormat(itme.afterChange) }}
                </span>
            </div>
            <div v-show="itme.riskModifyTypeEnum == '2'">
                <span class="edit-type">{{ itme.moduleDetail }} : <br /></span>
                <span class="edit-color" style="white-space: pre-wrap">
                    {{ isNaN(itme.afterChange) ? package(itme.afterChange) : setDateFormat(itme, 'afterChange') }}
                </span>
            </div>
            <div v-show="itme.riskModifyTypeEnum == '3'">
                <span class="edit-type">删除：</span> <span class="edit-color">{{ itme.moduleDetail }}</span>
                <span class="edit-color" style="white-space: pre-wrap">
                    {{ isNaN(itme.beforeChange) ? itme.beforeChange : numberFormat(itme.beforeChange) }}
                </span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { numberFormat, dateFormat } from '@/utils/tools';

@Component({ name: 'EntryItemCompare' })
export default class EntryItemCompare extends Vue {
    @Prop() title: any[];
    @Prop() data: any[];
    numberFormat = numberFormat;
    dateFormat = dateFormat;

    private setDateFormat(param1, param2) {
        return ['生效日期', '失效日期'].includes(param1.moduleDetail) && param1[param2] != '0'
            ? dateFormat(param1[param2])
            : numberFormat(param1[param2]);
    }

    package(data) {
        console.log(data, 'data');

        let showValue = data;
        showValue = showValue.replaceAll(',', '\n');
        console.log(showValue, 'showValue');

        return showValue;
    }
}
</script>
<style lang="scss" scoped>
.edit-title {
    font-size: 15px;
}

.edit-type {
    margin-left: 20px;
    color: green;
}

.edit-color {
    color: red;
}
</style>
